<template>
  <div id="schoolyard">
    <img class="schoolyardTitleImg" :src="$globalImageUrl + schoolArea.backImage" alt="">
    <div class="schoolyardContent">
      <div class="worksDetailNavInfo">
        <div><p>校企合作</p><span>&gt;</span><p>园区详情</p></div>
      </div>
      <div class="schoolyardContentBox">
        <div class="schoolyardContentBoxBlock">
          <h2>园区介绍</h2>
          <img class="schoolyardContentBoxBlockDown" src="../../assets/img/teamwork/double_arrow.png" alt="">
          <div class="schoolyardContentBoxBlockInfo">
            <img :src="$globalImageUrl + schoolArea.parkLogo" alt="">
            <div class="schoolyardContentBoxBlockHtml" v-html="schoolArea.introduce"></div>
          </div>
        </div>
        <div class="schoolyardContentBoxPolicy">
          <div class="schoolyardContentBoxPolicyLeft policyCommon" style="padding-right: .2rem;">
            <h2>园区政策</h2>
            <ul>
              <li v-for="(item, index) in schoolPolicy" :key="index" @click="jumpTo('/newsDetail?megagameNewsId=' + item.newsId)">
                <p class="ellipse">{{item.newsTitle}}</p>
                <span>{{item.createTime}}</span>
              </li>
            </ul>
          </div>
          <div class="schoolyardContentBoxPolicyRight policyCommon" style="padding-left: .2rem;">
            <h2>新闻公告</h2>
            <ul>
              <li v-for="(item, index) in schoolNews" :key="index" @click="jumpTo('/newsDetail?megagameNewsId=' + item.newsId)">
                <p class="ellipse">{{item.newsTitle}}</p>
                <span>{{item.createTime}}</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="schoolyardContentBoxBlock">
          <h2>创新团队</h2>
          <img class="schoolyardContentBoxBlockDown" src="../../assets/img/teamwork/double_arrow.png" alt="">
          <div class="schoolyardContentBoxBlockEnterprise">
            <ul>
              <li v-for="(item, index) in schoolInnovate" :key="index" @click="jumpTo('/stylistInfo?sceneType=enterprise&companyId=' + item.id)">
                <img :src="$globalImageUrl + item.enterpriseLogo" alt="">
                <div class="schoolyardContentBoxBlockEnterpriseCon">
                  <h3>{{item.companyName}}</h3>
                  <p>法人：{{item.contacts}} <span>成员：{{item.scale}}</span></p>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="schoolyardContentBoxBlock">
          <h2>园区优秀企业</h2>
          <img class="schoolyardContentBoxBlockDown" src="../../assets/img/teamwork/double_arrow.png" alt="">
          <div class="schoolyardContentBoxBlockEnterprise">
            <ul>
              <li v-for="(item, index) in schoolExcellent" :key="index" @click="jumpTo('/stylistInfo?sceneType=enterprise&companyId=' + item.id)">
                <img :src="$globalImageUrl + item.enterpriseLogo" alt="">
                <div class="schoolyardContentBoxBlockEnterpriseCon">
                  <h3>{{item.companyName}}</h3>
                  <p>法人：{{item.contacts}} <span>成员：{{item.scale}}</span></p>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'schoolyard',
  data () {
    return {
      schoolArea: {},
      parkId: this.$route.query.parkId,
      schoolPolicy: [],
      schoolNews: [],
      schoolInnovate: [],
      schoolExcellent: []
    }
  },
  created () {
    this.fetchParkById()
    this.fetchPolicyNews()
    this.fetchParkNews()
    this.fetchJoinEnter()
    this.fetchGoodEnter()
  },
  methods: {
    // 获取园区详情
    fetchParkById () {
      this.$api.getParkById({
        id: this.parkId
      }).then(res => {
        if (res.code === 0) {
          this.schoolArea = res.data
        }
      })
    },
    // 获取园区政策
    fetchPolicyNews () {
      this.$api.getPolicyNews({
        id: this.parkId
      }).then(res => {
        if (res.code === 0) {
          this.schoolPolicy = res.data
        }
      })
    },
    // 获取园区新闻公告
    fetchParkNews () {
      this.$api.getParkNews({
        id: this.parkId
      }).then(res => {
        if (res.code === 0) {
          this.schoolNews = res.data
        }
      })
    },
    // 获取园区创新团队
    fetchJoinEnter () {
      this.$api.getJoinEnter({
        id: this.parkId
      }).then(res => {
        if (res.code === 0) {
          this.schoolInnovate = res.data
        }
      })
    },
    // 获取园区优秀团队
    fetchGoodEnter () {
      this.$api.getGoodEnter({
        id: this.parkId
      }).then(res => {
        if (res.code === 0) {
          this.schoolExcellent = res.data
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
#schoolyard{
  .schoolyardTitleImg{
    width: 100%;
    height: 3rem;
    display: inline-block;
  }
  .schoolyardContent{
    width: 1200px;
    margin: auto;
    padding: .2rem 0;
    .schoolyardContentBox{
      .schoolyardContentBoxBlock{
        position: relative;
        padding-bottom: .4rem;
        h2{
          font-size: .28rem;
          font-weight: 500;
          color: #333;
          line-height: .6rem;
          text-align: center;
          border-bottom: 2px solid #90DCD8;
          margin-bottom: .4rem;
        }
        img.schoolyardContentBoxBlockDown{
          display: inline-block;
          background-color: #fff;
          position: absolute;
          left: 50%;
          top: .7rem;
          transform: translateX(-50%);
        }
        .schoolyardContentBoxBlockInfo{
          font-size: 0;
          img{
            width: 3.5rem;
            height: 3.5rem;
            display: inline-block;
            vertical-align: middle;
          }
          .schoolyardContentBoxBlockHtml{
            display: inline-block;
            width: calc(100% - 3.5rem);
            vertical-align: top;
            font-size: .16rem;
            padding-left: .2rem;
          }
        }
        .schoolyardContentBoxBlockEnterprise{
          ul{
            li:nth-child(5n){
              margin-right: 0;
            }
            li{
              width: 2.24rem;
              display: inline-block;
              background-color: #fff;
              box-shadow: 0 0 10px #ccc;
              margin-right: .2rem;
              margin-bottom: .2rem;
              img{
                width: 2.24rem;
                height: 1.6rem;
                display: inline-block;
              }
              div.schoolyardContentBoxBlockEnterpriseCon{
                padding: .05rem;
                h3{
                  font-size: .18rem;
                  font-weight: 500;
                  color: #333;
                  line-height: .26rem;
                }
                p{
                  font-size: .14rem;
                  font-weight: 500;
                  color: #999;
                  line-height: .22rem;
                  span{
                    font-size: .14rem;
                    font-weight: 500;
                    color: #999;
                    line-height: .22rem;
                    float: right;
                  }
                }
              }
            }
          }
        }
      }
      .schoolyardContentBoxPolicy{
        font-size: 0;
        padding-bottom: .4rem;
        .policyCommon{
          display: inline-block;
          vertical-align: top;
          width: 50%;
          h2{
            font-size: .28rem;
            font-weight: 500;
            color: #333;
            line-height: .6rem;
            border-bottom: 2px solid #90DCD8;
            margin-bottom: .2rem;
          }
          ul{
            li{
              border-bottom: 1px solid #ddd;
              p{
                font-size: .16rem;
                font-weight: 500;
                color: #333;
                line-height: .3rem;
                display: inline-block;
                max-width: 4rem;
              }
              span{
                font-size: .16rem;
                font-weight: 500;
                color: #999;
                line-height: .3rem;
                float: right;
              }
            }
          }
        }
      }
    }
  }
}
</style>
